<template>
  <div class="home-page">
    <!-- 头部 -->
    <div class="home-header">
      <div class="con">
        <h1>优医</h1>
        <div class="search">
          <img src="@/assets/icons/home/search.svg" style="width: 20px;height: 20px; margin-right: 5px;" alt="">
          搜一搜：疾病/症状/医生/健康知识
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="home-navs">
      <van-row>
        <van-col span="8">
          <router-link to="/" class="nav">
            <img src="@/assets/icons/home/doctor.svg" class="imgs" alt="">
            <p class="title">问医生</p>
            <p class="desc">按科室查问医生</p>
          </router-link>
        </van-col>
        <van-col span="8">
          <router-link to="/quickinquiry" class="nav">
           <img src="@/assets/icons/home/graphic.svg" class="imgs" alt="">
            <p class="title">极速问诊</p>
            <p class="desc">20s医生极速回复</p>
          </router-link>
        </van-col>
        <van-col span="8">
          <router-link to="/" class="nav">
            <img src="@/assets/icons/home/prescribe.svg" class="imgs" alt="">
            <p class="title">开药门诊</p>
            <p class="desc">线上买药更方便</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="6">
          <router-link to="/" class="nav min">
            <img src="@/assets/icons/home/order.svg" class="img" alt="">
            <p class="title">药品订单</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/" class="nav min">
            <img src="@/assets/icons/home/docs.svg" class="img" alt="">
            <p class="title">健康档案</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/" class="nav min">
            <img src="@/assets/icons/home/rp.svg" class="img" alt="">
            <p class="title">我的处方</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/" class="nav min">
            <img src="@/assets/icons/home/find.svg" class="img" alt="">
            <p class="title">疾病查询</p>
          </router-link>
        </van-col>
      </van-row>
    </div>
    <!-- 轮播图 -->
    <div class="home-banner">
      <van-swipe indicator-color="#fff" :touchable=true :loop=true autoplay="3000">
        <van-swipe-item>
          <img src="@/assets/images/ad.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/images/ad.png" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 内容 -->
    <div class="content">
           <van-tabs shrink sticky @click="clickChange" color="#16c2a3" line-width="20" line-height="2">
     <van-tab title="关注">
         <!-- 推荐关注 -->
        <div class="follow" v-if="followList.length">
          <div class="followTitle">
            <span class="recommend">推荐关注</span>
            <span class="more">查看更多<van-icon name="arrow" /></span>
          </div>
          <div class="followContent">
            <van-swipe class="my-swipe" indicator-color="white" width="130" :show-indicators=false>
              <van-swipe-item  v-for="(item,index) in followList" :key="index">
                <span class="card">
                <img :src="item.avatar" alt="" style="width: 40px;height: 40px;margin-top: 10px;">
                <p class="doctor">{{ item.name }}</p>
                <p class="hospital">{{ item.hospitalName }} {{item.depName}}{{ item.positionalTitles }}</p>
                <button>{{item.likeFlag?'已关注':'+ 关注'}}</button>
              </span>
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
      </van-tab>
      <van-tab title="推荐"></van-tab>
      <van-tab title="减脂"></van-tab>
      <van-tab title="饮食"></van-tab>
       <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check=false
      >
      <div>
        <div class="knowledge-card van-hairline--bottom" v-for="(item,index) in List" :key="index">
          <div class="head">
            <van-image
              round
              class="avatar"
              :src="item.creatorAvatar"
              style="margin-left: 10px;"
            ></van-image>
            <div class="info">
              <p class="name">{{ item.creatorName }}</p>
              <p class="dep van-ellipsis" style="color: #8a8a8a;">{{ item.creatorHospatalName }} {{ item.creatorDep }} {{ item.creatorTitles }}</p>
            </div>
            <van-button class="btn" size="small" round style="color: #16c2a3;">+ 关注</van-button>
          </div>
          <div class="body">
            <h3 class="title van-ellipsis" style="margin-left: 10px;font-size: 15px;width: 90%;font-weight: bold;">{{ item.title }}</h3>
            <p class="tag">
              <span style="margin-left: 8px;color: #16c2a3;"># {{ item.topic }}</span>
            </p>
            <p class="intro van-multi-ellipsis--l2" style="margin-left: 10px;color: #8a8a8a;font-size: 13px;font-weight: 500;width: 90%;" v-html="item.content"></p>
            <div class="imgs">
              <van-image
                :src="i"
                style="margin:0 8px;"
                fit="cover"
                v-for="(i,index) in item.coverUrl" :key="index"
              />
            </div>
            <p class="logs">
              <span style="margin-left: 10px;color: #8a8a8a;">{{ item.collectionNumber }}收藏</span>
              <span style="margin-left: 10px;color: #8a8a8a;">{{ item.commentNumber }}评论</span>
            </p>
          </div>
        </div>
      </div>
    </van-list>
    </van-tabs>
    </div>
  </div>
</template>

<script>
import { recommendApi, followApi } from '@/api/home.js'
export default {
  name: 'HomePage',
  data () {
    return {
      params: {
        type: 'like',
        current: '1',
        pageSize: '10'
      },
      params2: {
        current: '1',
        pageSize: '5'
      },
      List: [],
      followList: [],
      loading: false,
      finished: false,
      totalPage: 0
    }
  },
  methods: {
    async getRecommendData () {
      const res = await recommendApi(this.params)
      this.totalPage = res.data.total
      this.List = [...this.List, ...res.data.rows]
    },
    clickChange (name, title) {
      console.log(name)
      console.log(title)
      const titles = {
        关注: 'like',
        推荐: 'recommend',
        减脂: 'fatReduction',
        饮食: 'food'
      }
      this.params.type = titles[title]
      this.params.current = '1'
      this.List = []
      this.totalPage = 0
      this.loading = false
      this.finished = false
      this.getRecommendData()
    },
    async onLoad () {
      this.params.current++
      await this.getRecommendData()
      this.loading = false
      if (this.List.length >= this.totalPage) {
        this.finished = true
      }
    },
    async  getFollowData () {
      const res = await followApi(this.params2)
      this.followList = res.data.rows
    }
  },
  created () {
    this.getRecommendData()
    this.getFollowData()
  }
}
</script>
<style lang="less" scoped>
.home-page {
  padding-bottom: 50px;
}
.home-header {
  height: 100px;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: -12px;
    width: 100%;
    height: 90px;
    background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
    border-bottom-left-radius: 150px 20px;
    border-bottom-right-radius: 150px 20px;
  }
  .con {
    position: relative;
    padding: 0 15px;
    > h1 {
      font-size: 18px;
      color: #fff;
      font-weight: normal;
      padding: 10px 0;
      line-height: 1;
      padding-left: 5px;
    }
    .search {
      height: 40px;
      border-radius: 20px;
      box-shadow: 0px 15px 22px -7px rgba(224, 236, 250, 0.8);
      background-color: #fff;
      color: #9F9F9F !important;
      display: flex;
      align-items: center;
      padding: 0 20px;
      color: var(--cp-dark);
      font-size: 13px;
      .cp-icon {
        font-size: 16px;
        margin-right: 5px;
      }
    }
  }
}
.home-navs {
  padding: 10px 15px 0 15px;
  .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
   .van-icon{
    font-size: 48px;
    color: #26bcc6;
   }
   .imgs{
    width: 60px;
    height: 60px;
   }
   .img{
    width: 40px;
    height: 40px;
   }
    .title {
      font-weight: 500;
      margin-top: 5px;
      color:black;
      font-weight: 700;
    }
    .desc {
      font-size: 11px;
      color:#4B4D51;
      margin-top: -10px;
    }
    &.min {
      .van-icon {
        font-size: 31px;
      }
      .title {
        font-size: 13px;
        color:#66676A;
        font-weight: normal;
      }
    }
  }
}
.home-banner {
  padding: 10px 15px;
  height: 100px;
  img {
    width: 100%;
    height: 100%;
  }
}
.knowledge-card {
  padding: 10px 20px ;
  .head {
    display: flex;
    align-items: center;
    .avatar {
      width: 38px;
      height: 38px;
      margin-right: 10px;
    }
    .info {
      width: 200px;
      padding-right: 10px;
      .name {
        color: #414347;
      }
      .dep {
        margin-top: -10px;
        color: #cfcfd0;
        font-size: 12px;
      }
    }
    .btn {
      padding: 0 12px;
      border-color: #65c9bd;
      color: #65c9bd;
      height: 28px;
      width: 72px;
    }
  }
  .body {
    margin-top: -20px;
    .title {
      font-size: 18px;
      font-weight: 700;
    }
    .tag {
      margin-top: -10px;
      > span {
        color: #4dc1b3;
        margin-right: 20px;
        font-size: 12px;
      }
    }
    .intro {
      line-height: 2;
      color: #707070;
    }
    .imgs {
      margin-top: 7px;
      display: flex;
      .van-image {
        width: 106px;
        height: 106px;
        margin-right: 12px;
        border-radius: 12px;
        overflow: hidden;
        &:last-child {
          margin-right: 0;
        }
      }
      &.large {
        .van-image {
          width: 185px;
          height: 125px;
        }
      }
    }
    .logs {
      margin-top: 10px;
      > span {
        color:#c4c4c6;
        margin-right: 16px;
        font-size: 12px;
      }
    }
  }
}

.van-tabs {
  .van-tabs__nav {
    padding: 0 0 15px 0;
  }
  .van-tabs__line {
    width: 20px;
    background-color: var(--cp-primary);
  }
  .van-tab {
    padding: 0 15px;
  }
}
::v-deep .van-tab__text {
  font-weight: bold;
}
.knowledge-card {
  padding: 20px 0 16px;
  .head {
    display: flex;
    align-items: center;
    .avatar {
      width: 38px;
      height: 38px;
      margin-right: 10px;
    }
    .info {
      width: 200px;
      padding-right: 10px;
      .name {
        color: var(--cp-text2);
      }
      .dep {
        color: var(--cp-tip);
        font-size: 12px;
      }
    }
    .btn {
      padding: 0 12px;
      border-color: var(--cp-primary);
      color: var(--cp-primary);
      height: 28px;
      width: 72px;
    }
  }
  .body {
    .title {
      font-size: 16px;
      margin-top: 8px;
      font-weight: normal;
    }
    .tag {
      margin-top: 6px;
      > span {
        color: var(--cp-primary);
        margin-right: 20px;
        font-size: 12px;
      }
    }
    .intro {
      margin-top: 7px;
      line-height: 2;
      color: var(--cp-text3);
    }
    .imgs {
      margin-top: 7px;
      display: flex;
      .van-image {
        width: 106px;
        height: 106px;
        margin-right: 12px;
        border-radius: 12px;
        overflow: hidden;
        &:last-child {
          margin-right: 0;
        }
      }
      &.large {
        .van-image {
          width: 185px;
          height: 125px;
        }
      }
    }
    .logs {
      margin-top: 10px;
      > span {
        color: var(--cp-tip);
        margin-right: 16px;
        font-size: 12px;
      }
    }
  }
}
.follow {
  // width: 100%;
  // overflow-x: auto !important;
  height: 210px;
  background-color: #f6f7f9;
  .followTitle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 10px;
  .recommend {
    font-size: 14px;
    font-weight: bold;
  }
  .more {
    font-size: 14px;
    color: #8a8a8a;
  }
}
.followContent {
  padding-left: 15px;
  .card {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 150px;
    background-color: #fff;
    margin-right: 10px;
    border-radius: 15px;
    text-align: center;
    // font-size: 15px;
    .doctor {
      font-size: 14px;
      font-weight: bold;
    }
    .hospital {
      font-size: 10px;
      color: #8a8a8a;
      padding: 0 10px;
    }
    button {
      position: absolute;
      width: 60px;
      background-color: #16c2a3;
      border: none;
      color: #fff;
      font-size: 12px;
      line-height: 25px;
      border-radius: 15px;
      margin-top: 10px;
      bottom: 5px;
      left: 33px;
    }
  }
}
}
/deep/ .continuous-img-no-margin img{
  // display: none;
  width: 100px;
  height: 100px;
  object-fit: cover;
}
</style>
